<template>
	<view class="content">
		<!-- 1️⃣ 上传图片 -->
		<view class="photo-box">
			<text>*上传图片</text>
			<view class="photoes">
				<image v-for="(src, idx) in imgList" :key="idx" :src="src" class="photo" mode="aspectFill" @click="preview(idx)" />
				<view class="toPhoto" @click="chooseImg">
					<image src="../../static/takePicture.png" class="icon-picture"></image>
					<text>上传衣物图片</text>
				</view>
			</view>
		</view>

		<!-- 2️⃣ 备注 -->
		<view class="note-box">
			<text>*添加备注</text>
			<textarea v-model="remark" class="pop-textarea" placeholder="请输入备注（120字以内）" maxlength="120"></textarea>
		

		</view>

		<!-- 3️⃣ 订单（下拉） -->
		<view class="order-box">
			<text style="margin-right: 20rpx;">*选择订单</text>
			<view class="order-right">
				<picker @change="pickOrder" :value="orderIdx" :range="orderList" range-key="orderNumber" class="picker-txt">
					<view class="picker-txt">{{orderList[orderIdx].orderNumber}}</view>
				</picker>
				<image src="../../static/xia.png" class="icon-xia"></image>
			</view>

		</view>

		<!-- 4️⃣ 确认 -->
		<view class="ok">
			<button @click="submit" style="background-color:#aa0000;color:#ffffff;width:300rpx">确认添加</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue'

	import { addNote,fetchOrderList ,fetchAllCode} from '../../api/order'
	// 图片
	const imgList = ref([])
	const chooseImg = () => uni.chooseImage({
		count: 9,
		  success: (res) => {
		      imgList.value.push(...res.tempFilePaths)
		    }
	})
	// 备注
	const showPop = ref(false)
	const remark = ref('')
	// 订单
	const orderIdx = ref(0)
	const orderList = ref([])
	
	const fetchAC = async()=>{
			
		 const res = await fetchAllCode({
		})
		orderList.value =  res.data
		console.log(1,orderList.value)
	}
	const pickOrder = (e) => orderIdx.value = e.detail.value
	// 提交
	const submit = async () => {
	  if (orderList.value.length === 0) return uni.showToast({ title: '暂无订单', icon: 'none' })
	  const selected = orderList.value[orderIdx.value]   // 整个对象
	  await addNote({
	    orderId: selected.orderId,   // 用后端要的 id
	   images:"[\"http://example.com/image1.jpg \", \"http://example.com/image2.jpg \"]",
	    remark: remark.value
	  })
	  uni.showToast({ title: '提交成功' })
	}
	onMounted(async() => {
		fetchAC()
	})
	// const ok=()=>{
	// 	uni.showToast({
	// 		title:'已添加'
	// 	})
	// }
</script>


<style>
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		align-items: center;
		/* border:solid 1rpx #666666; */
		overflow-y: auto;

	}

	.photo-box,
	.note-box {
		display: flex;
		width: 95%;
		height: auto;
		margin-bottom: 20rpx;
		margin-top: 20rpx;

	}
	.pop-textarea {
		flex: 1;
		background-color: #f7f7f7;
		border-radius: 20rpx;
		margin-left: 20rpx;
		padding: 20rpx;
	}
	.icon-picture {
		width: 150rpx;
		height: 150rpx;
	}

	.toPhoto {
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		width: 200rpx;
		height: 200rpx;
		align-items: center;
		border-radius: 20rpx;
		background-color: #f7f7f7;
		margin-left: 20rpx;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}

	.photo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.photoes {
		flex:1;
		display: flex;
		flex-wrap: wrap;
		/* 自动换行 */
	}

	.order-box {
		display: flex;
		justify-content: space-between;
		width: 95%;
		margin-bottom: 50rpx;
	}

	.picker-txt {
		flex: 1;
		text-align: end;
		color: #a0a0a0;
	}

	.order-right {
		flex: 1;
		height: 80rpx;
		display: flex;
		
		align-items: center;
		background-color: #f7f7f7;
		justify-content: end;
		border-radius: 5rpx;
	}

	.icon-xia {
		width: 50rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
</style>